<template>
  <el-card style="margin-top: 20px">
    <el-table :data="listArr">
      <el-table-column label="序号" type="index" />
      <el-table-column label="姓名" sortable prop="username" />
      <el-table-column label="手机" sortable prop="mobile" />
      <el-table-column label="工号" sortable prop="workNumber" />
      <el-table-column label="部门" sortable prop="departmentName" />
      <el-table-column label="入职时间" sortable prop="timeOfEntry" />
      <el-table-column label="离职时间" sortable prop="leaveTime" />
      <el-table-column label="社保城市" prop="participatingInTheCity" />
      <el-table-column label="公积金城市" prop="providentFundCity" />
      <el-table-column label="社保基数" prop="socialSecurityBase" />
      <el-table-column label="公积金基数" prop="providentFundBase" />
      <el-table-column label="操作">
        <template slot-scope="{row}">
          <el-button type="text" @click="$router.push({name: 'socialDetail',params:{id: row.id}})">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="center">
      <el-pagination layout="prev, pager, next" :total="pageInfo.total" @current-change="change" />
    </el-row>
  </el-card>
</template>

<script>
import { getSocialList } from '@/api/social'
export default {
  name: 'SocialList',
  props: {
    checkedArr: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      pageInfo: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      listArr: [{
        username: '',
        mobile: '',
        workNumber: '',
        departmentName: '',
        timeOfEntry: '',
        leaveTime: '',
        participatingInTheCity: '',
        providentFundCity: '',
        socialSecurityBase: '',
        providentFundBase: ''
      }]
    }
  },
  watch: {
    checkedArr:
    {
      handler(newVal) {
        this.getSocialList()
      },
      deep: true, // 深度侦听
      immediate: true // 立即执行侦听函数
    }
  },
  created() {
    // this.getSocialList()
  },
  methods: {
    async getSocialList() {
      const { rows, total } = await getSocialList({ ...this.pageInfo, ...this.checkedArr })
      this.listArr = rows
      console.log(total)
      this.pageInfo.total = total
    },
    // 点击页码发生改变
    change() {
      this.pageInfo.page++
      this.getSocialList()
    }
  }
}
</script>

<style>

</style>
